 
 <template>
  <div>
    <el-dialog title=""
               v-loading="loading"
               class="login-dialog"
               :show-close="false"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="900px"
               :visible.sync="dialogFormVisible">
      <el-row>
        <el-col class="header-nav-left"
                :span="12">
          <img src="static/img/newLogo.png" />
          <!-- <div class="newLogo"></div> -->
        </el-col>
      </el-row>
      <el-row style="height: 400px"
              class="chooice-box">
        <el-col v-if="osd"
                :span="8"
                style="padding: 20px">
          <el-card class="disableCard"
                   :body-style="{ padding: '0px' }"
                   v-if="!bindPage">
            <!-- <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image"> -->
            <div style="padding: 14px;">
              <span>拖车信息绑定</span>
              <span class="info">无权限</span>
            </div>
          </el-card>
          <el-card v-else
                   :body-style="{ padding: '0px' }"
                   @click.native="toPage('CMSManualOSD')">
            <!-- <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image"> -->
            <div style="padding: 14px;">
              <span>拖车信息绑定</span>
            </div>
          </el-card>
        </el-col>
        <el-col v-if="osd"
                :span="8"
                style="padding: 20px">
          <el-card v-if="!searchPage"
                   class="disableCard"
                   :body-style="{ padding: '0px' }">
            <div style="padding: 14px;">
              <span>拖车信息维护</span>
              <span class="info">无权限</span>
            </div>
          </el-card>
          <el-card v-else
                   @click.native="toPage('CarList')"
                   :body-style="{ padding: '0px' }">
            <div style="padding: 14px;">
              <span>拖车信息维护</span>
            </div>
          </el-card>
        </el-col>

        <el-col v-if="ssd"
                :span="8"
                style="padding: 20px">
          <el-card v-if="!bindSsdPage"
                   class="disableCard"
                   :body-style="{ padding: '0px' }">
            <div style="padding: 14px;">
              <span>⾮⾃动出⻜⻋辆登记</span>
              <span class="info">无权限</span>
            </div>
          </el-card>
          <el-card v-else
                   @click.native="toPage('CMSManualSSD')"
                   :body-style="{ padding: '0px' }">
            <div style="padding: 14px;">
              <span>⾮⾃动出⻜⻋辆登记</span>
            </div>
          </el-card>
        </el-col>

        <el-col v-if="ssd"
                :span="8"
                style="padding: 20px">
          <el-card v-if="!ssdSearchPage"
                   class="disableCard"
                   :body-style="{ padding: '0px' }">
            <div style="padding: 14px;">
              <span>⾮⾃动出⻜⻋辆查询</span>
              <span class="info">无权限</span>
            </div>
          </el-card>
          <el-card v-else
                   @click.native="toPage('ManualList')"
                   :body-style="{ padding: '0px' }">
            <div style="padding: 14px;">
              <span>⾮⾃动出⻜⻋辆查询</span>
            </div>
          </el-card>
        </el-col>

        <el-col v-if="manual"
                :span="8"
                style="padding: 20px">
          <el-card v-if="!gateOutManualPage"
                   class="disableCard"
                   :body-style="{ padding: '0px' }">
            <div style="padding: 14px;">
              <span>⼿⼯出闸</span>
              <span class="info">无权限</span>
            </div>
          </el-card>
          <el-card v-else
                   @click.native="toPage('GateOutManual')"
                   :body-style="{ padding: '0px' }">
            <div style="padding: 14px;">
              <span>⼿⼯出闸</span>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8"
                style="padding: 20px"
                v-if="osd || ssd">
          <el-card @click.native="toPage('VerifyCard')"
                   :body-style="{ padding: '0px' }">
            <div style="padding: 14px;">
              <span>卡校验</span>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div slot="footer"
           class="dialog-footer">
        <el-button type="warning"
                   @click="logout">注销</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { GSAConstants } from '@/utils/access'
import { getRouter } from '@/utils/router-map'
import {
  showWarningMsg,
  showSuccessMsg,
  log
} from '@/utils/message'
export default {
  name: "pageHelper",
  data () {
    return {
      osd: false,
      ssd: false,
      manual: false,
      loading: false,
      bindPage: false,
      bindSsdPage: false,
      ssdSearchPage: false,
      searchPage: false,
      gateOutManualPage: false,
      ic: '',
      dialogFormVisible: false
    }
  },
  created: function () {

  },
  methods: {
    logout () {
      this.close()
      this.$emit('logout')
    },
    toPage (name) {
      // close dialog
      this.close()

      // 跳转页面
      this.$router.push(getRouter(name))
    },
    show (ic) {
      this.dialogFormVisible = true
      this.ic = ic
      this.refreshMenus()

      this.osd = false
      this.ssd = false
      this.manual = false
      if (ic === GSAConstants().TOPIC_MANUAL_OSD.ic || ic === GSAConstants().TOPIC_GET_GATE_IN_TRACTOR_PAGE.ic) {
        this.osd = true
      } else if (ic === GSAConstants().TOPIC_MANUAL_SSD.ic || ic === GSAConstants().TOPIC_QUERY_ID_NOTICE.ic) {
        this.ssd = true
      } else if (ic === GSAConstants().TOPIC_PREADVICE_MANUAL_OUT.ic) {
        this.manual = true
      } else {
        const clientType = this.$store.getters.terminalDtl.clientType
        if (clientType === 'CMSManualSSD') {
          this.ssd = true
        } else {
          this.osd = true
        }
      }
    },
    // 刷新菜单按钮
    refreshMenus () {
      const menus = this.$store.getters.menus
      log('刷新权限', menus)

      // osd 权限分为俩个
      // CMSOSD_Bind（拖⻋信息绑定）显示拖⻋信息绑定界⾯
      // CMSOSD_Search （拖⻋信息维护查询）显示拖⻋信息维护界⾯ 
      this.bindPage = false
      this.searchPage = false


      // ssd
      this.bindSsdPage = false
      this.ssdSearchPage = false
      // CMSSSD_ CheckIn（⾮⾃动出⻜⻋辆登记）显示⾮⾃动出⻜⻋辆登记界⾯
      // CMSSSD_Search（⾮⾃动出⻜⻋辆查询）显示⾮⾃动出⻜⻋辆查询界⾯

      // GateOutManual 
      this.gateOutManualPage = false
      // GateOutManual（⼿⼯出闸）显示⼿⼯出闸界⾯
      menus.forEach(menu => {
        const rightId = menu.key.rightId.trim()
        if (rightId === 'CMSOSD_Bind') {
          this.bindPage = true
        } else if (rightId === 'CMSOSD_Search') {
          this.searchPage = true
        } else if (rightId === 'CMSSSD_CheckIn' || rightId === 'CMSSSD_ CheckIn') {
          this.bindSsdPage = true
        } else if (rightId === 'CMSSSD_Search') {
          this.ssdSearchPage = true
        }
        else if (rightId === 'GateOutManual') {
          this.gateOutManualPage = true
        }
      })

    },
    close () {
      this.dialogFormVisible = false
    }
  },
}
</script>

<style scoped>
.login-bt {
  width: 100%;
}

.disableCard >>> .info {
  color: red;
  padding: 10px;
  display: block;
  font-size: 20px;
  width: 100%;
  text-align: center;
  font-weight: bold;
}

.chooice-box >>> .disableCard {
  filter: grayscale(80%);
  filter: rgb(51, 49, 49);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
.login-box >>> .el-form-item__label {
  font-size: 18px;
  color: #213767;
  font-weight: bold;
}

.header-nav-left img {
  height: 50px;
  margin-left: 20px;
}

.login-dialog >>> .el-dialog {
  /* background: linear-gradient(180deg, #F7FBFF 0%, #EBF0FF 100%); */
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px -1px 2px 0px #b0b9ce;
  background: url("/static/img/bg.png");
}

.login-dialog >>> .el-dialog__body {
  padding: 10px;
}
.login-img-box img {
  width: 100%;
  margin-top: 30px;
  height: 240px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  background-size: cover/contain;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-box >>> .el-form-item__error {
  font-size: 16px;
}

.login-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 20px;
  height: 340px;
}

.login-form {
  padding-top: 80px;
}

.chooice-box >>> .el-card {
  height: 100px;
  background-image: linear-gradient(to right, #fddb92 0%, #d1fdff 100%);
}
</style>
